<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图展示</title>
    <style>
      .main {
        position: relative;
        margin: 0 auto;
        width: 800px;
        height: 600px;
        outline: 2px solid skyblue;
      }
      .img {
        /* 用来约束图片 */
        width: 100%;
      }
      div > .left {
        position: absolute;
        top: 300px;
        left: 0px;
      }
      div > .right {
        position: absolute;
        top: 300px;
        right: 0px;
      }
      audio {
        position: absolute;
        bottom: 10px;
        left: 250px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <!-- 分为三块 图片  左右的控件图片 -->
      <img src="img/1.png" alt="" class="img" id="aid" />
      <img src="img/left.png" alt="" class="left" />
      <img src="img/right.png" alt="" class="right" />
      <audio
        src="music/1.mp3"
        controls="controls"
        autoplay
        hidden="true"
        class="music"
      >
        <!-- <source  type="audio/mp3"  /> -->
        <!-- 不要采用 source 添加src的内容 一方面多此一举 一方面无法通过 audio.play() 播放对应的音乐 
      audio.play() 会始终播放第一次的音乐文件 -->
      </audio>
      <!-- <div id="audioPay"></div> -->
    </div>
  </body>

  <script>
    // 准备一个数组 存放本地图片的路径
    var picArr = ["1.png", "2.png", "3.png", "4.png", "5.png"];
    // 播放对应的音乐 可以使用 音乐控件  再将其隐藏  同时绑定在对应的单击事件上即可
    var musicArr = ["1.mp3", "2.mp3", "3.mp3", "4.mp3", "5.mp3"];
    var img = document.querySelector(".img");
    var leftButton = document.querySelector(".left");
    var rightButton = document.querySelector(".right");
    var audio = document.querySelector("audio");
    var idx = 0;
    var midx = 0;

    // 绑定两个按钮单击事件 和 一个 定时器
    function clickLeft() {
      var imgUrl =
        "img/" + picArr[Math.abs((--idx + picArr.length) % picArr.length)];
      img.src = imgUrl;
      var musicUrl =
        "music/" +
        musicArr[Math.abs((--midx + musicArr.length) % musicArr.length)];
      audio.src = musicUrl;
      audio.play();
    }
    leftButton.addEventListener("click", function () {
      clickLeft();
    });

    function clickRight() {
      var imgUrl = "img/" + picArr[Math.abs(++idx % picArr.length)];
      img.src = imgUrl;
      var musicUrl = "music/" + musicArr[Math.abs(++midx % musicArr.length)];
      audio.src = musicUrl;
      audio.play();
    }
    rightButton.addEventListener("click", function () {
      clickRight();
    });

    function changePic() {
      var imgUrl = "img/" + picArr[Math.abs(++idx % picArr.length)];
      img.src = imgUrl;

      var musicUrl = "music/" + musicArr[Math.abs(++midx % musicArr.length)];
      audio.src = musicUrl;
      audio.play();
    }
    setInterval(changePic, 3000);

    // 并不生效
    // setTimeout(function () {
    //   //   rightButton.click();
    //   //   这种点击可以被监测到不是 用户的操作 所以也不能触发音频自动播放
    //   var e = document.createEvent("MouseEvents");
    //   e.initEvent("click", true, true);
    //   leftButton.dispatchEvent(e);
    // }, 500);
  </script>
</html>
